<template>
	<view>
		<!-- type 1 服务   2 酒店   3 门票    4 电影票 -->
		<view class="comment-list">
			<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
				<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
					<view class="image" v-if="item.type == 1">
						<u-image width="100%" height="100%" :src="item.service.image" mode="aspectFill">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="image" v-if="item.type == 2">
						<u-image width="100%" height="100%" :src="item.hotel_image" mode="aspectFill">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="image" v-if="item.type == 3">
						<u-image width="100%" height="100%" :src="item.images" mode="aspectFill">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="image" v-if="item.type == 4">
						<u-image width="100%" height="100%" :src="item.pic" mode="aspectFill">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
					<view class="substance">
						<view class="name hidden" v-if="item.type == 1">{{item.service.category_name}}</view>
						<view class="name hidden" v-if="item.type == 2">{{item.hotel_name}}</view>
						<view class="name hidden" v-if="item.type == 3">{{item.product_name}}</view>
						<view class="name hidden" v-if="item.type == 4">{{item.film_name}}</view>
						<view class="text" v-if="item.type == 1">
							<uni-dateformat format="yyyy-MM-dd" :date="item.start_time*1000"></uni-dateformat>
						</view>
						<view class="text" v-if="item.type == 2">
							<uni-dateformat format="yyyy-MM-dd" :date="item.createtime*1000"></uni-dateformat>
						</view>
						<view class="text" v-if="item.type == 3">
							{{item.travelDate}}
						</view>
						<view class="text" v-if="item.type == 4">
							<uni-dateformat format="yyyy-MM-dd" :date="item.createtime*1000"></uni-dateformat>
						</view>
						<view class="text" v-if="item.type==1">
							总价:￥{{Number(item.price).toFixed(2)}}
						</view>
						<view class="text" v-if="item.type==2">
							总价:￥{{Number(item.price).toFixed(2)}}
						</view>
						<view class="text" v-if="item.type==3">
							总价:￥{{Number(item.pay_amount).toFixed(2)}}
						</view>
						<view class="text" v-if="item.type==4">
							总价:￥{{Number(item.price).toFixed(2)}}
						</view>
						<view class="eval">
							<text>评价：</text>
							<uni-rate :disabled="true" disabledColor="#EF5233" :value="item.star" :size="18" />
						</view>
					</view>
				</view>
				<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无记录" :width="161"
					:height="129" v-show="list.length == 0"></blankPage>
			</cc-pullScroolView>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'commentList',
		data() {
			return {
				list: [],
				page: 1,
				total: 0,
			}
		},
		methods: {
			getList() {
				this.request.httpTokenRequest({
					url: "user/getMyAssess",
					method: "get"
				}, {
					page: this.page
				}).then(data => {
					uni.hideLoading()
					this.$refs.pullScroll.success();
					if (data.code == 0) {
						this.total = data.data.total
						data.data.data.forEach(item => {
							this.list.push(item)
						})
					} else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},
			// 下拉刷新
			pullDown(pullScroll) {
				this.page = 1
				this.list = []
				uni.showLoading()
				this.getList()
			},
			toDetail(e){
				// type 1 服务   2 酒店   3 门票    4 电影票
				if(e.type == 1){
					uni.navigateTo({
						url:`/otherpages/order/content/pedicure?order_id=${e.order_id}`
					})
				}
				if(e.type == 2){
					uni.navigateTo({
						url:`/otherpages/order/content/hotel?order_id=${e.order_id}`
					})
				}
				if(e.type == 3){
					uni.navigateTo({
						url:`/otherpages/order/content/tourism?order_id=${e.order_id}`
					})
				}
				if(e.type == 4){
					uni.navigateTo({
						url:`/otherpages/order/content/film?order_id=${e.order_id}`
					})
				}
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.comment-list {
		padding: 30rpx;
	}
	.item {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 30rpx 31rpx;
		display: flex;
		align-items: flex-start;
	
		.image {
			width: 160rpx;
			height: 214rpx;
			margin-right: 30rpx;
		}
	
		.substance {
			max-width: 68%;
	
			.name {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
				font-weight: 600;
				max-width: 100%;
			}
			
			.eval {
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				text {
					font-size: 24rpx;
					color: #08090A;
					line-height: 33rpx;
				}
			}
	
			.text {
				width: 100%;
				font-size: 22rpx;
				color: #888889;
				line-height: 30rpx;
				margin-top: 12rpx;
				display: flex;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
	
				i {
					font-size: 24rpx;
					font-weight: 600;
					color: #EF5233;
					line-height: 33rpx;
					margin: 0 10rpx;
					font-style: normal;
				}
	
				.line {
					width: 1rpx;
					height: 23rpx;
					background: rgba(151, 151, 151, 0.4);
					margin-right: 10rpx;
				}
			}
		}
	}
	
</style>